<template>
	<view class="cart-block">
		<view class="tool-block">
			<view class="img center">
				<image :src="icon" class="auto-img"></image>
			</view>
			<view class="title">帮你吖店商城</view>
			<view class="btn" @tap="editClick">{{btnState?'编辑':'完成'}}</view>
		</view>
		 <template v-if="cartData.length>0">
			 <block v-for="(item,index) in cartData" :key="index">
			 	<view class="item" :class="index==item.length-1?'':'item-border'" @tap="itemClick(item)">
			 		<view class="check-img" v-if="item.isCheck==false" @tap="itemCheckClick(item.isCheck,index)">
			 
			 		</view>
			 		<view class="check-icon center" v-if="item.isCheck==true" @tap="itemCheckClick(item.isCheck,index)">
			 			<image :src="checkIcon" class="auto-img"></image>
			 		</view>
			 		<view class="img center">
			 			<image :src="item.main_image" class="auto-img img-radius"></image>
			 
			 		</view>
			 		<view class="right-info">
			 			<view class="title">{{item.title}}</view>
			 			<view class="nums-block">
			 				<view class="nums">
			 					<span>¥</span>
			 					{{item.product_price/100}}
			 				</view>
			 				<view class="count-block center">
			 					<uni-number-box :min="1" :max="1000" @change='numberChange' :index='index'
			 						:value="item.count||1"></uni-number-box>
			 				</view>
			 			</view>
			 		</view>
			 
			 	</view>
			 </block>
		 </template>
		 <template v-if="cartData.length==0">
			  <view class="no-emty">购物车空空的</view>
		 </template>
	</view>
</template>

<script>
	export default {
		props: {
			btnState: {
				type: Boolean,
				default: true,
			},
			cartData: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {

			 
				icon: require('@/static/cart/icon.png'),
				checkIcon: require('@/static/cart/check.png'),

			}
		},
		methods: {
			numberChange(value, index) {
				this.$emit('countChange',value,index)
			},
			itemClick(item) {
				this.$emit('itemClick',item)
			},
			itemCheckClick(val, index) {
				this.$emit('itemCheck', val, index)
			},
			editClick() {
				this.$emit('edit', !this.btnState)
			}
		}
	}
</script>

<style scoped lang="scss">
	.cart-block {
		margin: 24rpx 24rpx 0 24rpx;
		padding: 0 20rpx;
		border-radius: 8rpx;
		background: #fff;
	}

	.tool-block {
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid rgba(238, 238, 238, 1);

		.img {
			flex: none;
			width: 60rpx;
			height: 60rpx;
			border-radius: 8rpx;
		}

		.title {
			flex: auto;
			margin-left: 12rpx;
			font-size: 32rpx;
			font-weight: 500;
		}

		.btn {
			flex: none;
			border-radius: 142rpx;
			width: 100rpx;
			line-height: 52rpx;
			text-align: center;
			background: rgba(0, 0, 0, 0.06);
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(20, 20, 20, 1);
		}
	}

	.item-border {
		border-bottom: 2rpx solid rgba(238, 238, 238, 1);
	}

	.item {
		height: 260rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 32rpx 0;

		.check-img {
			border-radius: 50%;
			flex: none;
			width: 34rpx;
			height: 34rpx;
			border: 2rpx solid rgba(202, 202, 202, 1);
		}

		.check-icon {
			flex: none;
			width: 38rpx;
			height: 38rpx;
			border-radius: 50%;
		}

		.img {
			margin-left: 24rpx;
			width: 180rpx;
			height: 180rpx;
			border-radius: 8rpx;
			flex: none;
		}

		.right-info {
			margin-left: 20rpx;
			flex: auto;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 100%;

			.title {

				font-size: 30rpx;
				font-weight: 400;
				white-space: normal;
				line-height: 1.5em;
			}

			.nums-block {

				margin-top: 36rpx;
				display: flex;
				align-items: center;

				.nums {
					font-size: 32rpx;

					color: rgba(203, 60, 40, 1);

					span {
						font-size: 22rpx;
					}

					flex: auto;
				}

				.count-block {
					flex: none;
					height: 40rpx;
				}
			}
		}
	}
	.no-emty{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;
	}
</style>
